<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody">
			<!-- 页面內容 -->
			<view :style="{backgroundImage:'url('+tubiao+')'}"
				style="margin: 15rpx auto;;width: 690rpx;height: 342rpx; background-size: contain;">

			</view>

			<view
				style="margin: 25rpx auto; background-image: url(../../static/rise_vip_youshi.png);background-size: contain;width: 690rpx;height: 340rpx;">
				<text
					style="position: absolute;top: 384rpx;left: 539rpx; font-size:38rpx;font-weight:normal;color:rgba(207,187,139,1);text-shadow:0px 1rpx 1rpx rgba(255,255,255,0.27);">
					￥{{ money }}
				</text>
				<view style="position: relative;top:85rpx;left: 75rpx;">
					<view v-for="(item,index) in texts" :key="index" class="grace-rows" style="margin-bottom: 10rpx;">
						<view
							style="position: relative;top: 12rpx; width:8rpx;height:8rpx;background:rgba(67,63,51,1);border-radius:50%;">
						</view>
						<text
							style="margin-left: 20rpx; font-size:24rpx;font-weight:400;color:rgba(84,82,76,1);width: 590rpx;">{{ item }}</text>
					</view>
				</view>
			</view>

			<view v-for="(item,index) in zhifu_list" @tap="get_pay_type(index,item.id)"
				class="grace-flex grace-flex-vcenter"
				style="width:750rpx;height:100rpx;background:rgba(255,255,255,1);margin-top: 5rpx;">
				<view class="grace-rows">
					<image :src="item.img" style="margin-left: 31rpx; width: 70rpx;height: 70rpx;"></image>
					<text
						style="margin-left: 31rpx; font-size:26rpx;font-weight:400;color:rgba(42,42,42,1);line-height:30px;">{{item.name}}</text>
					<text v-show="item.name == '金币支付'"
						style="position: absolute;left: 260rpx;line-height: 60rpx; font-size:22rpx;font-weight:400;color:rgba(153,153,153,1);">剩余积分：{{ yue }}</text>
					<image :src="item.is_mo==1?xuanzong:weixuanzong"
						style="position: absolute; width: 32rpx;height: 32rpx;right: 31rpx;margin-top: 34rpx;"></image>

				</view>
			</view>

			<button v-show="xianshi" @tap="up_vip()"
				style="margin-top: 105rpx; width:687rpx;height:90rpx;background:#00A0E9;border-radius:6rpx;font-size:32rpx;font-weight:400;color:rgba(255,255,255,1);line-height:90rpx;margin-bottom: 100rpx;">立即升级</button>
			<button v-show="!xianshi" @tap="up_vip()" :style="{background:button_color}" class="button_color">购买vip卡</button>
			<!-- 更多商品 -->
			<!-- 	<view class="shapin">
				<view class="shuxian"></view>
				<text style="font-size: 18rpx;color: #111111;margin-left: 3rpx;">更多商品</text>
			</view>
			<view class="pinsr">
				<image src="../../static/tupian1.png" mode="" style="width: 157rpx;height: 157rpx;margin-left: 31rpx;"></image>
			</view>
			<view class="pinsr">
				<image src="../../static/tupian2.png" mode="" style="width: 152rpx;height: 152rpx;margin: 0 26rpx;"></image>
			</view>
			<view class="pinsr">
				<image src="../../static/tupian3.png" mode="" style="width: 155rpx;height: 155rpx;"></image>
			</view>
			<view class="pinsr">
				<image src="../../static/tupian4.png" mode="" style="width: 154rpx;height: 154rpx;margin-left: 25rpx;"></image>
			</view> -->
			<!-- 客服帮助 -->
			<!-- 	<view class="kef_s" @tap="qiaozhuandaokehu">
				<image :style="'left:'+moveX+'px;top:'+moveY+'px'" @touchstart="drag_start" @touchmove.prevent="drag_hmove" src="../../static/kefs.png"
				 mode="" style="width: 152rpx;height:79rpx;transform: translate(4rpx,4rpx);"></image>
			</view> -->
			<ourLoading isFullScreen active text="加载中..." v-if="!loadings" />
		</view>
	</gracePage>
</template>
<!-- <script src="//res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script> -->
<script src="https://gw.alipayobjects.com/as/g/h5-lib/alipayjsapi/3.1.1/alipayjsapi.inc.min.js"></script>
<script>
		import gracePage from "../../graceUI/components/gracePage.vue";
	export default {
		data() {
			return {
				button_color:'',//按钮颜色
				tubiao: '',
				texts: [],
				money: '',
				xianshi: true,
				is_wx: true,
				yue: "0", //客户余额
				start: [0, 0],
				moveY: 0,
				moveX: 0,
				windowWidth: '',
				windowHeight: '',
				loadings: false,
				zhifu_list: [], // 支付方式
				zhifu_id: '', // 支付id
				xuanzong: '../../static/rise_vip_xuanzhong.png',
				weixuanzong: '../../static/rise_vip_weixuanzhong.png',
				page_type: '' // app页面判断
			}
		},
		onShow: function() {
			this.button_color = uni.getStorageSync('button_color');
			var user = uni.getStorageSync('user_id');
			if (!user) {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			}
			this.huoqu_list();
			// #ifdef H5
			var system = {};
			var p = navigator.platform;
			system.win = p.indexOf("Win") == 0;
			system.mac = p.indexOf("Mac") == 0;
			system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
			if (system.win || system.mac || system.xll) { //如果是电脑跳转到
				this.page_type = 'js'
				console.log(this.page_type);
			} else { //如果是手机,跳转到
				this.page_type = 'h5'
				console.log(this.page_type);
			}
			var ua = navigator.userAgent.toLowerCase();
			// alert(ua)  
			if (ua.search(/MicroMessenger/i) > -1) {
				this.is_wx = false;
			} else if (ua.search(/mqqbrowser/i) > -1) {
				this.is_wx = true;
			} else {
				this.is_wx = true;
			}
			// #endif
			// #ifdef APP-PLUS
				this.page_type = 'app'
			// #endif
		},
		onReady() {
			var vm = this;

			setTimeout(function() {
				vm.loadings = true
				// vm.$refs.loading.open();
				// vm.$refs.loading.close();
			}, 500)
		},
		onLoad() {

			const {
				windowWidth,
				windowHeight
			} = uni.getSystemInfoSync();
			this.windowWidth = windowWidth
			this.windowHeight = windowHeight
		},
		methods: {
			drag_start(event) {
				console.log(event.touches[0].clientX - event.target.offsetLeft);
				this.start[0] = event.touches[0].clientX - event.target.offsetLeft;
				this.start[1] = event.touches[0].clientY - event.target.offsetTop;
			},
			drag_hmove(event) {
				let tag = event.touches;
				if (tag[0].clientX < 0) {
					tag[0].clientX = 0
				}
				if (tag[0].clientY < 0) {
					tag[0].clientY = 0
				}
				if (tag[0].clientX > this.windowWidth) {
					tag[0].clientX = this.windowWidth
				}
				if (tag[0].clientY > this.windowHeight) {
					tag[0].clientY = this.windowHeight
				}
				this.moveX = tag[0].clientX - this.start[0];
				this.moveY = tag[0].clientY - this.start[1];
			},
			qiaozhuandaokehu() {
				var token = uni.getStorageSync('user_token');
				console.log(token);
				uni.navigateTo({
					url: "/pages/web_view/web_views?token=" + token
				})
			},
			// 获取用户升级的数据配置
			huoqu_list() {
				var vm = this
				vm.myPost(
					'api/Myvip/get_vip_config', {},
					function(res) {
						console.log(res)
						if (res.code == 200) {
							vm.texts = res.data.config.miaoshu;
							vm.zhifu_list = res.data.vip_config.goumao_type
							vm.each(vm.zhifu_list, function(v, i) {
								if (v.is_mo == 1) {
									vm.zhifu_id = v.name
								}
							})
							vm.tubiao = res.data.config.imgs;
							vm.money = res.data.vip_config.price;
							vm.yue = res.data.gold_coin
							var xianshi1 = res.data.level.grade;
							if (xianshi1 === 10000) {
								vm.xianshi = true;
							} else {
								vm.xianshi = false;
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}


					}
				)
			},
			// 选择支付方式
			get_pay_type(type, id) {
				this.zhifu_id = id
				var list_shuju = this.zhifu_list
				var newinfo = []
				this.each(list_shuju, function(v, i) {
					if (v.id == list_shuju[type].id) {
						v.is_mo = 1
					} else {
						v.is_mo = 0
					}
					newinfo.push(v);
				})
				this.zhifu_list = newinfo

			},
			// 升级或购买vip卡的确认按钮
			up_vip() {
				console.log(this.zhifu_id);
				//return
				var vm = this
				vm.myPost(
					'api/Myvip/purchase_vip', {
						type_id: vm.zhifu_id,
						page_type: vm.page_type
					},
					function(res) {
						if (res.code == 200) {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}

						// #ifdef APP-PLUS
						var provider = '';
						if (type === '微信') {
							provider = 'wxpay';
						} else if (type === '支付宝') {
							provider = 'alipay';
						}
						// 支付数据
						uni.requestPayment({
							provider: provider, // wxpay、alipay
							orderInfo: res.data, //微信、支付宝订单数据
							success: function(res) {
								uni.showToast({
									title: "支付成功",
								})
								console.log('success:' + JSON.stringify(res));
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
							}
						});
						// #endif

						// #ifdef H5
						// var jweixin = require('https://res2.wx.qq.com/open/js/jweixin-1.4.0.js')

						if (type === '微信') {
							function onBridgeReady() {
								WeixinJSBridge.invoke(
									'getBrandWCPayRequest', res.data,
									function(res) {

										if (res.err_msg == "get_brand_wcpay_request:ok") {
											// window.location.href="https://xs.scthzy.com/user/index/index.html";
											// 使用以上方式判断前端返回,微信团队郑重提示：
											//res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
										}
									});
							}
							if (typeof WeixinJSBridge == "undefined") {
								if (document.addEventListener) {
									document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
								} else if (document.attachEvent) {
									document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
									document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
								}
							} else {
								onBridgeReady();
							}

							// wx.config({$payconfig});
							wx.ready(function() {
								wx.chooseWXPay(res.data);
							});
							wx.error(function(res) {
								alert(res)
							});



						} else if (type === '支付宝') {
							const form = res.data;
							// deleteExisting('#alipay'); // 判断之前是否插入过#alipay
							const div = document.createElement('div');
							div.id = 'alipay';
							div.innerHTML = form;
							document.body.appendChild(div);
							document.querySelector('#alipay').children[0].submit(); // 执行后会唤起支付宝

						}





						// #endif


					}
				)
			},

		},
		components: {
			gracePage
		}
	}
</script>

<style>
	.button_color{
		margin-top: 105rpx; width:687rpx;height:90rpx;background:#00A0E9;border-radius:6rpx;font-size:32rpx;font-weight:400;color:rgba(255,255,255,1);line-height:90rpx;margin-bottom: 100rpx;
	}
	.kef_s {
		position: absolute;
		top: 650rpx;
		left: 600rpx;
		z-index: 9999;
		float: right;
	}

	.shapin {
		margin-left: 35rpx;
		margin-top: 32rpx;
	}

	.shuxian {
		display: inline-block;
		width: 4rpx;
		height: 25rpx;
		transform: translateY(2.5rpx);
		background-color: #CC0000;
	}

	.pinsr {
		display: inline-block;
		margin-top: 13rpx;
	}
</style>


<!-- .grace-flex // 声明 flex
.grace-rows // flex 横向
.grace-columns  //flex 竖向
.grace-wrap //flex 自动换行
.grace-nowrap //flex 横向不换行
.grace-space-between //flex 横向两端对齐
.grace-flex-end //flex 横向右对齐
.grace-flex-center  //flex 横向居中
.grace-flex-top  //flex 垂直顶端对齐
.grace-flex-vcenter //flex 垂直居中对齐
.grace-flex-bottom //flex 垂直底部对齐
.grace-no-scale //元素不缩放 -->
